<template>
  <div>
    <el-row :gutter="24">
      <el-col :span="24">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item>
            <el-select v-model="formInline.region">
              <el-option label="手机号" value="1"></el-option>
              <el-option label="微信昵称" value="2"></el-option>
              <el-option label="用户名" value="3"></el-option>
              <el-option label="卡号" value="4"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-input
              v-model="formInline.userName"
              placeholder="请输入关键词"
              suffix-icon="el-icon-search"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">展开</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="24">
        <el-button type="size">导出会员数据</el-button>
        <el-button type="size">打标签</el-button>
        <el-button type="size">修改等级</el-button>
        <el-button type="size">冻结</el-button>
        <el-button type="size">解冻</el-button>
        <el-button type="size" @click="AddClient">添加客户</el-button>
        <el-button type="size">导入客户</el-button>
        <el-button type="size">标签管理</el-button>
        <el-button type="size">同步粉丝</el-button>
      </el-col>
    </el-row>
    <el-dialog title="添加客户" :visible.sync="dialogFormVisibleAddClient">
      <CreateClient
        ref="CreateClient"
        @saveclient="saveclient"
        :key="new Date().getTime()"
      ></CreateClient>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleAddClient = false">取 消</el-button>
        <el-button type="primary" @click="Save">确 定</el-button>
      </div>
    </el-dialog>
    <el-table
      ref="multipleTable"
      :data="clientlist"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="userName" label="客户信息"> </el-table-column>
      <el-table-column prop="userType" label="身份等级"> 
        
      </el-table-column>
      <!-- <el-table-column prop="name" label="标签"> </el-table-column>
      <el-table-column prop="name" label="卡号"> </el-table-column> -->
      <el-table-column prop="userPhone" label="手机"> </el-table-column>
      <el-table-column prop="userNetbalance" label="可用余额">
      </el-table-column>
      <el-table-column prop="userAvailableintegral" label="可用积分">
      </el-table-column>
      <!-- <el-table-column prop="name" label="累计消费金额"> </el-table-column>
      <el-table-column prop="name" label="累计消费次数"> </el-table-column>
      <el-table-column prop="name" label="累计退款次数"> </el-table-column>
      <el-table-column prop="name" label="累计维权次数"> </el-table-column> -->
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="label" @click="handleEdit(scope.row)"
            >编辑</el-button
          >
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import CreateClient from "./CreateClient.vue";
import { getclientlist } from "@/api/client";
export default {
  components: {
    CreateClient,
  },
  data() {
    return {
      formInline: {
        user: 1,
        userName: "",
        totalCount: 0,
        pageIndex: 1,
        pageSize: 3,
      },
      multipleSelection: [],
      clientlist: [],
      dialogFormVisibleAddClient: false,
    };
  },
  mounted() {
    this.getlist();
  },
  methods: {
    //添加客户
    AddClient() {
      this.dialogFormVisibleAddClient = true;
    },
    saveclient() {
      this.dialogFormVisibleAddClient = false;
      this.getlist();
    },
    Save() {
      this.$refs.CreateClient.addclient();
    },
    onSubmit() {
      this.pageIndex = 1;
      this.getlist();
    },
    //客户显示
    getlist() {
      getclientlist(this.formInline).then((res) => {
        this.clientlist = res.data;
        this.formInline.totalCount = res.totalCount;
      });
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },


  },
};
</script>